import React, { useState, useRef, useEffect } from 'react'
import { Toast, NavBar } from 'react-vant';
import { useLocation, useNavigate, useParams } from 'react-router-dom'
import { SendOutline } from 'antd-mobile-icons'
import { GoodJobO, StarO,ChatO } from '@react-vant/icons';
import './index.css'
const Index: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [obj, setObj] = useState(location.state)
  const [num, setNum] = useState(10); // 点赞数量
  const [isLiked, setIsLiked] = useState(false); // 是否被点赞

  const [shou, setShou] = useState(false); // 是否被点赞
  const zan = () => {
    if (isLiked) {
      setNum(num - 1);
      setIsLiked(false);
    } else {
      setNum(num + 1);
      setIsLiked(true);
    }
  }
  const cang = () => {
    if (shou) {
      setShou(false);
    } else {
      setShou(true);
    }
  }

  const shareContent = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: '分享标题',
          text: '分享的文本内容',
          url: window.location.href
        });
      } catch (error) {
        console.error('分享失败:', error);
      }
    } else {
      console.log('浏览器不支持Web Share API');
    }
  };
  const [isSecondInputVisible, setIsSecondInputVisible] = useState(false);
  const toggleSecondInputVisibility = () => {
    setIsSecondInputVisible(!isSecondInputVisible);

  };

  const qu = (e) => {
    setIsSecondInputVisible(false);
    e.value = ''
  }
  // 存储单个评论的状态
  const [comment, setComment] = useState('');
  // 存储所有评论的状态
  const [comments, setComments] = useState([]);
  const [data, setData] = useState(['王*欢', '李*辉', '陈*宇'])
  const [randomData, setRandomData] = useState(data[Math.floor(Math.random() * data.length)]);
  // 重新随机选择数据
  useEffect(() => {
    setRandomData(data[Math.floor(Math.random() * data.length)]);
  }, [data]);


  const handleCommentChange = (e) => {
    setComment(e.target.value);
  };
  const handleSubmit = () => { 
    if (comment.trim()) {
      setComments([...comments, comment]);
      setComment(''); // 清空输入框‘
    }
    setIsSecondInputVisible(false);
  };

  return (
    <div>
      <p className='p1' onClick={shareContent}><SendOutline /></p>
      <div className='jktitle'><NavBar
        title='健康头条'
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      /></div>
      <h1>{obj.item.title} </h1>
      <div className='div1'>
        <img src={obj.item.img2} alt="" style={{ width: '30px', height: '30px', borderRadius: '50%' }} />
        <p>{obj.item.wei}</p>
        <p>{obj.item.count}阅读</p>
      </div>
      <div>
        <p>中国中西医结合学会皮肤性病专业委员会色素病学组，在2018年推出了中国的《白癜风诊疗共识》，该共识对于他克莫
          司治疗白癜风有哪些建议呢?一起来看看吧~</p>
        <p className='vv'>白癜风的发疯机制与常用药物</p>
        <p style={{marginTop:"5px"}}>白癜风患者常伴有自身免疫性疾病，多数的白癜风患者存在免疫异常包括细胞免疫与体液免疫紊乱。目前，
          对白癜风的发病机制的研究也多倾向于自身免疫学说。对于白癜风的常规治疗，有多种方法，包括激素、光疗、免疫抑制剂、中药、光敏药等。</p>
        <p className='vv'>他克莫司软膏能治疗白癜风吗?</p>
        <p>他克莫司软膏近年来已成为治疗白癜风的常用药物。国内外均有许多临床报道和应用经验。例如世界著名期刊JAMADERMATOLOGY杂志2019年就
          发表了一项大样本的系统回顾和荟萃分析，展示了特殊的治疗方法</p>
        <p className='vv'>他克莫司软膏能治疗白癜风优势独特</p>
        <p style={{marginTop:"5px"}}>2018年的《白癜风诊疗共识》指出，他克莫司不仅可以治疗白癜风，而且还具有很多独特优势。该专家共识提到: <span style={{color:"red",fontSize:"14px"}}>外用钙调神经磷酸酶抑制剂
          可以用于治疗白癜风;治疗时间应持续3-6个月，间歇应用可更长;面部和颈部复色效果最好;特殊部位如眶周可首选，黏膜部位和生殖部位也可使用;
          钙调神经磷酸酶抑制剂无激素特别是强效激素引起的不良反应;钙调神经磷酸酶抑制剂可作为维持治疗用药，在白癜风皮损成功复色后每周2次外用
          3-6个月，可有效预防复发或脱色现象。</span></p>
        <p style={{marginTop:"10px"}}>他克莫司软膏治疗白癜风安全性高《白癜风诊疗共识》指出，他克莫司局部涂药治疗白癜风耐受性好。他克莫司软膏，<span style={{color:"red",fontSize:"14px"}}>可用于2岁及2岁以上儿童病例。
          但是涂药面积应小于体表面积的20%，疗效随疗程延长而增加，疗程超过6个月时，宜与其他药物交替或间隙使用。他克莫司局部应用不会影响胶原蛋
          白合成，因此不会引发皮肤萎缩．可用于糖皮质激素不宜用的部位，如眼睑、会阴、乳房与皱褶部，这是它的一大优势。</span></p>
        <p className='vv1'><b>金玉尔R他克莫司软膏--白癜风治疗一线用药</b></p>
        <p style={{marginTop:"5px"}}>他克莫司软膏商品名为金玉尔，由专业的皮肤药品生产商江苏知原药业有限公司生产，被批准用于免疫相关的皮肤疾病。<span style={{color:"red",fontSize:"14px"}}>推荐白癜风患者每日使用本品2次，每次间隔8个小时。</span></p>
      </div>

      <div className='tu'>
        <div className='tu1'>
          <GoodJobO className='biao' onClick={zan} style={isLiked ? { color: 'red' } : {}} />
          <p className='ppp' style={{ color: isLiked ? 'red' : '' }} >{num}</p>
        </div>
        <div className='tu1'>
          <StarO className='biao' onClick={cang} style={shou ? { color: 'yellow' } : {}} />
          <p className='ppp1'>{shou ? '已收藏' : '收藏'}</p>
        </div>
        <div className='tu1'>
          <img src="../src/assets/00_03.jpg" alt="" style={{ width: '40px', height: '40px',marginTop:'10px',marginLeft:'15px' }} />
          <p className='ppp'>点赞</p>
        </div>
        <div className='tu1'>
          <img src="../src/assets/00_05.jpg" alt="" style={{ width: '40px', height: '40px',marginTop:'10px',marginLeft:'15px' }} />
          <p className='ppp'>微信</p>
        </div>
      </div>
      <h2 className='pl'>评论区</h2>
      <div className='vv2'>
        {comments.map((comment, index) => (
          <div key={index}>
            <div className='zx'>
              <img src="../src/assets/50_03.jpg" alt="" style={{ width: '80px', height: '80px' }} />
              <div>
                <h4 className='mz'>{randomData}</h4>
                <p className='nr'>{comment}</p>
                <p>2024-12-14 10:20:00</p>
              </div>
            </div>
          </div>
        ))}

      </div>
      <div className='pl3'>
        <div className='inp'>
          <input placeholder="输入想说的话" className='inpu' onClick={toggleSecondInputVisibility} />
          {isSecondInputVisible && (
            <div className='input22'>
              <div className='fa'>
                <button className='qu' onClick={qu}>取消</button>
                <button className='quee'   onClick={handleSubmit}>确定</button>
              </div>
              <hr />
              <textarea
                value={comment}
                onChange={handleCommentChange}
                placeholder="写下你的评论..."
                style={{ width: "100%", height: '100%', border: 'none' }}
              />
            </div>
          )}
        </div>
        <div className='pl1'>
          <div className='pl2'>
            <ChatO className='tu1' />
            <p className='qq1'>评论</p>
          </div>
          <div className='pl2'>
            <GoodJobO className='tu1' onClick={zan} style={isLiked ? { color: 'red' } : {}} />
            <p className='qq1'>{isLiked ? '已点赞' : '点赞'}</p>
            <p className='qqqq'>{num}</p>
          </div>
          <div className='pl2'>
            <StarO className='tu1' onClick={cang} style={shou ? { color: 'yellow' } : {}} />
            <p className='qq1'>{shou ? '已收藏' : '收藏'}</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
